<template>
    <div class="offerResult">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">报价结果</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>

        <pay-com></pay-com>

        <car-header></car-header>

        <div class="car-content">
            <cell :border-intent="false" :arrow-direction="isShowCarItemDetail ? 'up' : 'down'" @click.native="isShowCarItemDetail = !isShowCarItemDetail" class="car-cell" is-link>
                <div slot="after-title" class="car-text">
                    <div v-show="tprpTmainDto.combineFlag=='COMBINE'||tprpTmainDto.combineFlag=='MOTOR'">车险&nbsp:&nbsp
                        <span>商业险种(¥&nbsp{{tprpTmainDto.premium}}&nbsp)&nbsp</span>
                    </div>
                    <div v-show="tprpTmainDto.combineFlag=='COMBINE'||tprpTmainDto.combineFlag=='MTPL'" class="car-detail-min">
                        <span v-show="tprpTmainDto.combineFlag=='MTPL'">车险&nbsp:&nbsp</span>
                        <span v-show="tprpTmainDto.combineFlag!='MTPL'">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span> 交强险(¥&nbsp{{tprpTmainDto.mtplPremium}}&nbsp)&nbsp&nbsp车船税(¥&nbsp{{tprpTmainDto.tax}}&nbsp)</div>

                    <div v-show="tprpTmainDto.combineFlag=='COMBINE'||tprpTmainDto.combineFlag=='MOTOR'" class="car-detail-min">商业险期限&nbsp:&nbsp{{tprpTmainDto.startDate}}-{{tprpTmainDto.endDate}}</div>
                    <div v-show="tprpTmainDto.combineFlag=='COMBINE'||tprpTmainDto.combineFlag=='MTPL'" class="car-detail-min">交强险期限&nbsp:&nbsp{{tprpTmainDto.mtplStartDate}}-{{tprpTmainDto.mtplEndDate}}</div>
                </div>
            </cell>
            <template v-if="isShowCarItemDetail">
                <div class="car-offResult car-back">
                    <cell v-for="(item,index) in tprpTitemKindListDto" :key="index">
                        <div slot="after-title" class="item-text-car">{{item.kindNameMain}}</div>
                        <div v-show="item.amountMain!=0.0" slot="inline-desc">保额：{{item.amountMain}}</div>
                        <div slot="default" class="car-tem-price">¥{{item.premiumMain}}</div>
                    </cell>
                </div>
            </template>

            <cell v-show="axtxPrice!=0" :border-intent="false" :arrow-direction="axtxDetailShow ? 'up' : 'down'" @click.native="axtxDetailShow = !axtxDetailShow" class="car-cell" is-link>
                <div slot="after-title" class="car-text">
                    <div>意外险&nbsp:&nbsp
                        <span v-show="axtxPrice!=0">安行天下&nbsp(¥&nbsp{{axtxPrice}}&nbsp)&nbsp</span>
                    </div>

                    <div v-show="tprpTmainDto.combineFlag=='COMBINE'||tprpTmainDto.combineFlag=='MOTOR'" class="car-detail-min">期限&nbsp:&nbsp{{tprpTmainDto.startDate}}-{{tprpTmainDto.endDate}}</div>
                    <div v-show="tprpTmainDto.combineFlag=='MTPL'" class="car-detail-min">期限&nbsp:&nbsp{{tprpTmainDto.mtplStartDate}}-{{tprpTmainDto.mtplEndDate}}</div>
                </div>
            </cell>
            <template v-if="axtxDetailShow">
                <div class="car-offResult car-back">
                    <cell v-for="(item,index) in axtxKind.kinds" :key="index">
                        <div slot="after-title" class="item-text-car">{{item.cvgName}}</div>
                        <div slot="default" class="car-offer-font-blue" style="font-size:13px">保额:{{item.adultStr|price}}</div>
                    </cell>
                </div>
            </template>

            <cell v-show="atqqbPrice!=0" :border-intent="false" :arrow-direction="atqqbDetailShow ? 'up' : 'down'" @click.native="atqqbDetailShow = !atqqbDetailShow" class="car-cell" is-link>
                <div slot="after-title" class="car-text">
                    <div>意外险&nbsp:&nbsp
                        <span v-show="atqqbPrice!=0">安途全球保&nbsp(¥&nbsp{{atqqbPrice}}&nbsp)&nbsp</span>
                    </div>

                    <div v-show="tprpTmainDto.combineFlag=='COMBINE'||tprpTmainDto.combineFlag=='MOTOR'" class="car-detail-min">期限&nbsp:&nbsp{{tprpTmainDto.startDate}}-{{tprpTmainDto.endDate}}</div>
                    <div v-show="tprpTmainDto.combineFlag=='MTPL'" class="car-detail-min">期限&nbsp:&nbsp{{tprpTmainDto.mtplStartDate}}-{{tprpTmainDto.mtplEndDate}}</div>
                </div>
            </cell>
            <template v-if="atqqbDetailShow">
                <div class="car-offResult car-back">
                    <cell v-for="(item,index) in atqqbKind.kinds" :key="index">
                        <div slot="after-title" class="item-text-car">{{item.cvgName}}</div>
                        <div slot="default" class="car-offer-font-blue" style="font-size:13px">保额:{{item.adultStr|price}}</div>
                    </cell>
                </div>
            </template>

            <div>

                <group class="car-offResult">
                    <cell :arrow-direction="carOwner ? 'up' : 'down'" @click.native="carOwner = !carOwner" is-link>
                        <span class="car__list--title" slot="after-title">
                            <span class="car__iconspan"></span>
                            <span class="car__iconspan--title">车主信息</span>
                        </span>
                    </cell>

                    <template v-if="carOwner">
                        <div class="car-offResult">
                            <cell>
                                <div slot="after-title" class="car-info-size">车主类型</div>
                                <div v-show="tprptCarOwnerDto.natureOfRole==1" slot="default" class="car-info-name">个人</div>
                                <div v-show="tprptCarOwnerDto.natureOfRole==2" slot="default" class="car-info-name">团体</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">姓名</div>
                                <div slot="default" class="car-info-name">{{tprptCarOwnerDto.name}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">证件号码</div>
                                <div slot="default" class="car-info-name">{{tprptCarOwnerDto.idNo}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">电话</div>
                                <div slot="default" class="car-info-name">{{tprptCarOwnerDto.cellPhoneNo}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">地址</div>
                                <div slot="default" class="car-info-name">{{tprptCarOwnerDto.address}}</div>
                            </cell>
                        </div>
                    </template>
                    <cell :arrow-direction="appliShow ? 'up' : 'down'" @click.native="appliShow = !appliShow" is-link>
                        <span class="car__list--title" slot="after-title">
                            <span class="car__iconspan"></span>
                            <span class="car__iconspan--title">投保人信息</span>
                        </span>
                        <div v-show="appliIsOwner" slot="default" class="carinsure-text">同车主
                            <i class="weui-icon weui_icon_success weui-icon-success" style=""></i>
                        </div>
                    </cell>
                    <template v-if="appliShow">
                        <div class="car-offResult">
                            <cell>
                                <div slot="after-title" class="car-info-size">车主类型</div>
                                <div v-show="tprptApplicantDto.natureOfRole==1" slot="default" class="car-info-name">个人</div>
                                <div v-show="tprptApplicantDto.natureOfRole==2" slot="default" class="car-info-name">团体</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">姓名</div>
                                <div slot="default" class="car-info-name">{{tprptApplicantDto.name}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">证件号码</div>
                                <div slot="default" class="car-info-name">{{tprptApplicantDto.idNo}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">电话</div>
                                <div slot="default" class="car-info-name">{{tprptApplicantDto.cellPhoneNo}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">地址</div>
                                <div slot="default" class="car-info-name">{{tprptApplicantDto.address}}</div>
                            </cell>
                        </div>
                    </template>
                    <cell :arrow-direction="insureShow ? 'up' : 'down'" @click.native="insureShow = !insureShow" is-link>
                        <span class="car__list--title" slot="after-title">
                            <span class="car__iconspan"></span>
                            <span class="car__iconspan--title">被保人信息</span>
                        </span>
                        <div v-show="insureIsOwner" slot="default" class="carinsure-text">同车主
                            <i class="weui-icon weui_icon_success weui-icon-success" style=""></i>
                        </div>
                        <div v-show="insureIsAppli" slot="default" class="carinsure-text">同投保人
                            <i class="weui-icon weui_icon_success weui-icon-success" style=""></i>
                        </div>
                    </cell>
                    <template v-if="insureShow">
                        <div class="car-offResult">
                            <cell>
                                <div slot="after-title" class="car-info-size">车主类型</div>
                                <div v-show="tprptInsuredDto.natureOfRole==1" slot="default" class="car-info-name">个人</div>
                                <div v-show="tprptInsuredDto.natureOfRole==2" slot="default" class="car-info-name">团体</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">姓名</div>
                                <div slot="default" class="car-info-name">{{tprptInsuredDto.name}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">证件号码</div>
                                <div slot="default" class="car-info-name">{{tprptInsuredDto.idNo}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">电话</div>
                                <div slot="default" class="car-info-name">{{tprptInsuredDto.cellPhoneNo}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-size">地址</div>
                                <div slot="default" class="car-info-name">{{tprptInsuredDto.address}}</div>
                            </cell>
                        </div>
                    </template>
                </group>

                <group class="car-offResult">
                    <cell class="car-insure-list" :arrow-direction="isShowSpecialAgreement ? 'up' : 'down'" @click.native="isShowSpecialAgreement = !isShowSpecialAgreement" is-link>
                        <span class="car__list--title" slot="after-title">
                            <img slot="icon" src="~assets/car/specialAgreement.png" class="go-back car-list-img">
                            <span style="color: #fff;" class="car__iconspan--title">特别约定</span>
                        </span>
                    </cell>
                    <template v-if="isShowSpecialAgreement">
                        <div class="car-offResult">
                            <div v-for="(item,index) in tprptEngageDTOList" :key="index" class="spe-border">
                                <cell class="cell-border-top" :border-intent="false" :arrow-direction="item.direction ? 'up' : 'down'" @click.native="item.direction = !item.direction" is-link>
                                    <div class="car__iconspan--title" slot="after-title">{{item.clausesName}}&nbsp</div>

                                    <div @click="setItemIcon(index)" slot="default">
                                        <i v-show="item.seleFlage" class="weui-icon weui_icon_success weui-icon-success"></i>
                                        <i v-show="!item.seleFlage" class="weui-icon weui_icon_circle weui-icon-circle"></i>

                                    </div>
                                    <!-- {{item.clauseCode}} -->
                                </cell>
                                <template v-if="item.direction">
                                    <x-textarea class="car__iconspan--title" :readonly="item.updateFlag=='1'" v-model="item.clausesContext" autosize>
                                    </x-textarea>

                                </template>
                            </div>
                        </div>
                    </template>
                </group>

                <group class="car-offResult">
                    <cell :arrow-direction="isShowSendMsg ? 'up' : 'down'" @click.native="isShowSendMsg = !isShowSendMsg" is-link>
                        <span class="car__list--title" slot="after-title">
                            <span class="car__iconspan"></span>
                            <span class="car__iconspan--title">配送信息</span>
                        </span>
                        <div slot="default" class="carinsure-text">免费配送
                        </div>
                    </cell>
                    <template v-if="isShowSendMsg">
                        <div style="border-top: 1px solid #e0dfdf;" class="car-offResult">
                            <x-input placeholder="姓名" class="base-input_font" id="testDemo" v-model="tdistributionDto.name" :min="2" :max="10" required>
                                <div class="insure__input " slot="label">
                                    <img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp
                                    <!-- 姓名&nbsp -->
                                </div>
                            </x-input>
                            <x-input class="base-input_font" placeholder="手机号码  (收取短信通知)" v-model="tdistributionDto.cellPhoneNo" keyboard="number" required>
                                <div class="insure__input" slot="label">
                                    <img src="~assets/x3/ico/icon-tel.png" class="icon-img">&nbsp&nbsp
                                </div>
                            </x-input>
                            <x-input class="base-input_font" placeholder="电子邮件" v-model="tdistributionDto.email" is-type="email" required>
                                <div class="insure__input" slot="label">
                                    <img src="~assets/x3/ico/icon-email.png" class="icon-img">&nbsp&nbsp
                                </div>
                            </x-input>
                            <x-input class="base-input_font" placeholder="通讯地址" v-model="tdistributionDto.address" required>
                                <div class="insure__input" slot="label">
                                    <img src="~assets/x3/ico/icon-addre.png" class="icon-img">&nbsp&nbsp
                                </div>
                            </x-input>

                        </div>
                    </template>
                </group>
            </div>
            <div style="height: 100px;"></div>
            <!-- <div class="car-insureinfo">
                <div>投保险种:&nbsp商业险种(¥2500) 交强险 (¥1100)</div>
                <div>保单期限:&nbsp2016年8月20日-2017年8月21日</div>
                <div>保单总额:¥3600</div>
            </div> -->
            <div class="car_footer">
                <div class="car_leftbtn">
                    <div>
                        <img src="~assets/car/shop.png" class="icon-img">&nbsp保费合计 ：¥&nbsp{{showPrice}}
                    </div>
                    <!-- <span>999</span> -->
                </div>
                <div @click="downList()" :style="queryStyle" class="car_rightbtn">{{text}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import Validation from "src/common/util/validation";
import carHeader from "src/components/car/carHeader";
import {
    XHeader,
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    CheckIcon,
    XTextarea,
    XInput
} from "vux";
import {
    Mutations,
    Car_Mutations,
    RouteUrl
} from "src/common/const";
import PayCom from "src/components/PayCom";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        XHeader,
        Group,
        Cell,
        PayCom,
        CellFormPreview,
        CellBox,
        CheckIcon,
        XTextarea,
        XInput,
        carHeader
    },
    computed: {
        ...mapState({
            // insure: "insure",
            isLoading: "isLoading",
            user: "user",

            saveInsure: "saveInsure",
            detailsStore: "detailsStore",
            isWeChar: "isWeChar",
            carAddr: "carAddr",
            shareData: "shareData",
            initIndexData: "initIndexData",
            car: "car",
            queryStyle: "queryStyle",
            baseIsQuery: "baseIsQuery",
            seleValue: "seleValue",
            accessUrl: "accessUrl",
            dealUid: "dealUid"
        })    },
    data() {
        return {
            appliShow: false,
            insureShow: false,
            tdistributionDto: {
                name: "",
                cellPhoneNo: "",
                address: "",
                email: "",
            },
            test: "",
            isShowSendMsg: true,
            isShowSpecialAgreement: false,
            carOwner: false,
            isShowCarItemDetail: false,
            subPremium: "",    //总保费
            tprpTmainDto: {},  //投保信息主表
            tprpTitemKindListDto: [], //险别标的信息List
            prpTcarshipTaxDto: [], //车船税信息
            commissionDtoList: {}, //佣金相关
            text: "下单",

            tprptEngageDTOList: [], //特别约定
            tprptCarOwnerDto: {},  //设置车主信息
            tprptApplicantDto: {}, //设置投保人
            tprptInsuredDto: {},  //被保险人
            appliIsOwner: false,  //投保人是否同车主
            insureIsAppli: false, //被保人是是否同投保人
            insureIsOwner: false, //被保人是是否同车主 
            showCarInfo: [],

            axtxPrice: 0,
            axtxKind: {},
            axtxDetailShow: false,


            atqqbPrice: 0,
            atqqbKind: {},
            showPrice: 0,
            atqqbDetailShow: false,
        };
    },
    watch: {
        baseIsQuery(cur, old) {
            this.setText();
        }
    },
    filters: {
        price(val) {
            if (val != "" && val != null) {
                if (val.indexOf("元") > -1 || val.indexOf("天") > -1) {
                    return val;
                }
                if (val.indexOf("*") > -1) {
                    let priList = val.split("*");
                    let num = priList[0];
                    let stPrice = priList[1] + "";
                    stPrice = stPrice.split(",").join("");
                    let price = parseFloat(stPrice) / 10000;
                    return num + "*" + price + "万";
                } else {
                    val = val.split(",").join("");
                    let price = parseFloat(val) / 10000;
                    return price + "万";
                }
            } else {
                return val;
            }
        }
    },
    methods: {
        setText() {
            if (this.baseIsQuery) {
                this.text = "下单";
            } else {
                this.text = "正在提交中...";
            }
        },
        baseVal() {
            //             tdistributionDto: {
            //     name: "",
            //     cellPhoneNo: "",
            //     address: "",
            //     email: "",
            // },
            if (this.tdistributionDto.name != "" || this.tdistributionDto.cellPhoneNo != "" || this.tdistributionDto.address != "" || this.tdistributionDto.email != "") {
                if (this.tdistributionDto.name == "") {
                    return this.$common.showErrorMsg(this, "配送姓名不能为空!");
                }
                let msg = Validation.isPhone11(this.tdistributionDto.cellPhoneNo);
                if (msg != null) {
                    return this.$common.showErrorMsg(this, "投保" + msg);
                }
                if (this.tdistributionDto.address == "") {
                    return this.$common.showErrorMsg(this, "邮寄地址不能为空!");
                }
                if (this.tdistributionDto.email == "") {
                    return this.$common.showErrorMsg(this, "邮箱地址不能为空!");
                }
                if (!Validation.isEmail(this.tdistributionDto.email.toLowerCase())) {
                    return this.$common.showErrorMsg(this, "被保人邮箱格式不正确");
                }

            }
            return true;
        },
        setItemIcon(index) {
            let flage = this.tprptEngageDTOList[index].seleFlage;
            if (this.tprptEngageDTOList[index].mustFlag != "0") {
                flage = !flage;
            }
            this.tprptEngageDTOList[index].seleFlage = flage;
        },
        goDistribution() {
            this.$common.goUrl(this, RouteUrl.DISTRIBUTION);
        },
        showErrorMsg(errorMsg, type) {
            this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
            if (type) {
                return false;
            } else {
                // setTimeout(() => {
                //     this.$vux.alert.hide();
                // }, 3000);
                return false;
            }
        },
        downList() {
            // debugger
            if (this.baseVal()) {
                this.saveData();
                if (this.baseIsQuery) {
                    this.$common.storeCommit(this, Car_Mutations.DOWN_LIST, this);
                }
            }
        },
        goSpeAgr() {
            this.$common.goUrl(this, RouteUrl.SPECIAL_AGREEMENT);
        },
        onClick() {

        },
        goCarOffer() {
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.CAR_OFFER);
        },
        saveData() {
            this.$common.storeCommit(this, Car_Mutations.SAVE_DISTRIBUTION, this.tdistributionDto);
            this.$common.storeCommit(this, Car_Mutations.SAVE_SPECIAL_AGREEMENT, this);
            this.$common.storeCommit(this, Car_Mutations.SET_OFFER_RESULT, this);
        },
        setData() {
            this.$common.storeCommit(this, Car_Mutations.SET_SPECIAL_AGREEMENT, this);
            this.$common.storeCommit(this, Car_Mutations.SET_OFFER_RESULT, this);
        }
    },
    beforeRouteEnter(to, from, next) {
        next();
    },
    beforeMount() {
        this.setData();
    },
    beforeDestroy() {
        this.saveData();
    },
    mounted() {
        document.title = '报价结果';
        this.$init.subPageInit(this);

    }

}
</script>

<style lang="scss">
@import "~styles/carCommon";
</style>


<style lang="scss">

</style>
